<template>
  <div class="tabimg">
    <img
      :style="index != imgindex ? { display: 'none' } : ''"
      v-for="(item, index) in listimg"
      :key="index"
      :src="item"
    />
  </div>
</template>

<script>
export default {
  name: "tabimg",
  props: {
    listimg: {
      type: Array,
    },
  },
  data() {
    return {
      imgindex: 0,
      offimg: false,
    };
  },
  mounted() {
    if (this.offimg) {
      clearInterval(offimg);
    }
    let offimg = setInterval(() => {
      let len = this.listimg.length;
      this.imgindex = Math.floor(Math.random() * len + 0);
    }, 5000);
    this.offimg = true;
  },
};
</script>

<style lang="scss">
.tabimg {
  position: relative;
  height: 100vh;
  img {
    width: 95%;
    transition: all 600ms;
  }
}
</style>

<style></style>
